<template>
    <div id="mainContent">
        <!-- 任务统计 -->
        <el-card class="box-card" style="margin-right:15px;">
            <el-row class="searchBox">
                <el-form :inline="true" size="small" label-width="100px">
                    <el-form-item label="任务单号：">
                        <el-input size="small" placeholder="任务单号"></el-input>
                    </el-form-item>
                    <el-form-item label="操作时间：">
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col :span="1" :offset="23" style="text-align: right;">
                    <jt-table-column-filter :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
                </el-col>
            </el-row>
            
            <el-table :data="tableData" :key='tableKey' v-loading="loading" border stripe height="460">
                <el-table-column type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column>
                <el-table-column align="center" :key='item' v-for='item in filterColumnData' :resizable="false"
                    :label="getTableHeaderLabel(item)" 
                    :prop="item" 
                    :min-width="getTableColumnWidth(item)" 
                    :fixed="getTableColumnFixed(item)" 
                    :sortable="getTableColumnSort(item)">
                    <template slot-scope="scope">
                        <div v-if="item !== 'operate'">{{scope.row[item]}}</div>
                        <el-tooltip v-if="item === 'operate'" class="item" effect="dark" content="详情" placement="top">
                            <el-button icon="el-icon-document" type="primary" size="small"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"></el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import JtTableColumnFilter from 'components/jt-table-column-filter/index';    // 导入表格列筛选组件
    export default {
        name: 'TaskStatistical',
        components: {
            'jt-table-column-filter': JtTableColumnFilter
        },
        data(){
            return {
                tableData: [{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: "操作"
                    }],
                loading: false,
                tableKey: 1,
                filterColumnData: [],
                tableHeaderArr: [{
                        'name': 'status',
                        'alias': '任务单号',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'id',
                        'alias': '任务类型',
                        'default': true,
                        'width': 270,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'resource',
                        'alias': '操作人',
                        'default': false,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'changeStatus',
                        'alias': '操作时间',
                        'default': false,
                        'width': 110,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'operate',
                        'alias': '操作',
                        'default': true,
                        'width': 90,
                        'fixed': 'right',
                        'sort': false
                    }],
                pageSizeArr: [10, 20, 50],
                pageSize: 10,
                pageTotal: 20,
                currentPage: 1,
            }
        },
        methods: {
            formatter(row, column){
                return row.id;
            },
            handleSizeChange(val){
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val){
                // console.log(`当前页: ${val}`);
            },
            // 表头展示
            getTableHeaderLabel(str) {
                return this.getTableSomeValue(str, 'alias');
            },
            // 获取表格列的宽度
            getTableColumnWidth(str){
                return this.getTableSomeValue(str, 'width');
            },
            // 获取表格列是否是固定的
            getTableColumnFixed(str){
                return this.getTableSomeValue(str, 'fixed');
            },
            // 获取表格列是否排序
            getTableColumnSort(str){
                return this.getTableSomeValue(str, 'sort');
            },
            // 获取表格表头，列宽度，列固定，列排序的值
            getTableSomeValue(str, keyName){
                for (var value of this.tableHeaderArr) {
                    if (value['name'] == str) {
                        return value[keyName];
                    }
                }
            }
        }
    }
</script>